<template>
  <div>
    <button @click="show =! show">toggle</button>
    <p>{{ msgFun }}</p>
    <p>{{ timeFun() }}</p>

    <transition>
      <button v-bind:key="docState">
        {{ buttonMessage }}
      </button>
    </transition>

    <transition
      appear
      appear-class="custom-appear-class"
      appear-to-class="custom-appear-to-class"
      appear-active-class="custom-appear-active-class"
    >
      <p v-show="show">custom-appear-class</p>
    </transition>

    <input type="text" autofocus>
    <input type="text" v-focus>
  </div>
</template>

<script>
  var mixin = {
    data: function () {
      return {
        message: 'hello',
        foo: 'abc'
      }
    },
    created() {
      console.log('混入对象的钩子被调用')
    },
    methods:{
      fooVue() {
        console.log('foo2')
      }
    }
  }

  export default {
    mixins: [mixin],
    name: 'HelloWorld',
    data() {
      return {
        ok: false,
        show: false,
        docState: 'edited',
        message: 'goodbye',
        bar: 'def'
      }
    },
    computed: {
      msgFun() {
        return new Date().getTime();
      },
      buttonMessage: function () {
        switch (this.docState) {
          case 'saved':
            return 'Edit'
          case 'edited':
            return 'Save'
          case 'editing':
            return 'Cancel'
        }
      }
    },
    methods: {
      toggle() {
        this.ok = !this.ok
        this.$refs.animated
      },
      beforeEnter(e) {
        // console.log(e)
      },
      timeFun() {
        return new Date().getTime()
      },
      fooVue() {
        console.log('foo1')
      }
    },
    created() {
      // console.log(this.$data)
      console.log('组件钩子被调用')
    },
    mounted() {
      console.log(this.fooVue())
    },
    directives:{
      focus:{
        inserted(e){
          e.focus()
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "hello";
  @import "animate.css";

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  .wrapper {
    width: 300px;
    border: 1px solid;
    margin: 50px auto;
  }
</style>
